<template>
  <div>
     <el-container>
      <el-header  style="padding:0;">
        <el-menu 
       
        mode="horizontal"
        default-active="2"
        background-color="#333"
        text-color="#999"
        active-text-color="#fff" >
          <el-menu-item index="1">指南</el-menu-item>
          <el-menu-item index="2">组件</el-menu-item>
          <el-menu-item index="3">主题</el-menu-item>
          <el-menu-item index="4">资源</el-menu-item>
        </el-menu>
      </el-header>
        <el-container>
          <el-aside width="220px" class="demo">
            <el-menu 
            router
            style="height:calc(100vh - 60px)"
            :default-active="$route.path"
            background-color="#333"
            text-color="#999"
            active-text-color="#fff"
            >
              <el-menu-item index="/component/container">
                <i class="el-icon-guide"></i>
                Container布局</el-menu-item>
              <el-menu-item index="/component/table">
                <i class="el-icon-postcard"></i>
                Table表格</el-menu-item>
              <el-menu-item index="/component/form">
                <i class="el-icon-money"></i>
                From表单</el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- 占位符，匹配二级路由，动态显示内容 -->
            <router-view/>
          </el-main>
        </el-container>  
     </el-container>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" >
*{
  padding: 0;margin: 0;
}
/* 滚动条样式 demo*/
.demo::-webkit-scrollbar {
/*滚动条整体样式*/
width: 3px;
}

.demo::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
width: 3px;
background-color: #aaa;
}

.demo::-webkit-scrollbar-track {
/*滚动条里面轨道*/
width: 3px;
background: #fff0;
}
</style>